<!DOCTYPE html "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
    .ztree li span.button.add {
        margin-left: 2px;
        margin-right: -1px;
        background-position: -144px 0;
        vertical-align: top;
        *vertical-align: middle
    }
</style>
<head th:include="include :: header"></head>
<BODY>
<div class="content_wrap">
    <div class="zTreeDemoBackground left">
        <input type="hidden" id="pId" name="pId" th:value="${pId}">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</div>
<div th:include="include::footer"></div>
<SCRIPT type="text/javascript">
    <!--
    var setting = {
        view: {
            addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom,
            selectedMulti: false
        },
        edit: {
            enable: true,
            editNameSelectAll: true,
            // showRemoveBtn: showRemoveBtn,
            // showRenameBtn: showRenameBtn
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeDrag: beforeDrag,
            beforeEditName: beforeEditName,
            beforeRemove: beforeRemove,
            beforeRename: beforeRename,
            onRemove: onRemove,
            onRename: onRename
        }
    };

    var zNodes = [
        {id: 1, pId: 0, name: "parent node 1", open: true},
        {id: 11, pId: 1, name: "leaf node 1-1"},
        {id: 12, pId: 1, name: "leaf node 1-2"},
        {id: 13, pId: 1, name: "leaf node 1-3"},
        {id: 2, pId: 0, name: "parent node 2", open: true},
        {id: 21, pId: 2, name: "leaf node 2-1"},
        {id: 22, pId: 2, name: "leaf node 2-2"},
        {id: 23, pId: 2, name: "leaf node 2-3"},
        {id: 3, pId: 0, name: "parent node 3", open: true},
        {id: 31, pId: 3, name: "leaf node 3-1"},
        {id: 32, pId: 3, name: "leaf node 3-2"},
        {id: 33, pId: 3, name: "leaf node 3-3"}
    ];
    var log, className = "dark";

    function beforeDrag(treeId, treeNodes) {
        return false;
    }

    function beforeEditName(treeId, treeNode) {
        className = (className === "dark" ? "" : "dark");
        showLog("[ " + getTime() + " beforeEditName ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.selectNode(treeNode);
        setTimeout(function () {
            setTimeout(function () {
                zTree.editName(treeNode);
            }, 0);
        }, 0);
        return false;
    }

    function beforeRemove(treeId, treeNode) {
        className = (className === "dark" ? "" : "dark");
        showLog("[ " + getTime() + " beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.selectNode(treeNode);
        return confirm("确认删除 节点 -- " + treeNode.name + "' 吗?");
    }

    function onRemove(e, treeId, treeNode) {
        // 执行删除操作
        $.ajax({
            type: "POST",
            data: {
                "specsId": treeNode.id
            },
            url: "/app/specsCfg/onRemove",
            success: function (code) {
                console.log(code);
                if (code == 1) {
                    alert("删除失败");
                }
            }
        });
        showLog("[ " + getTime() + " onRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
    }

    function beforeRename(treeId, treeNode, newName, isCancel) {
        className = (className === "dark" ? "" : "dark");
        showLog((isCancel ? "<span style='color:red'>" : "") + "[ " + getTime() + " beforeRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>" : ""));
        if (newName.length == 0) {
            setTimeout(function () {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.cancelEditName();
                alert("节点名称不能为空.");
            }, 0);
            return false;
        } else {
            // 执行异步更新操作
            $.ajax({
                type: "POST",
                data: {
                    "specsId": treeNode.id,
                    "specsName": newName
                },
                url: "/app/specsCfg/onRename",
                success: function (code) {
                    console.log(code);
                    if (code == 1) {
                        alert("更新失败");
                    }
                }
            });
        }
        return true;
    }

    function onRename(e, treeId, treeNode, isCancel) {
        showLog((isCancel ? "<span style='color:red'>" : "") + "[ " + getTime() + " onRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>" : ""));
    }

    // function showRemoveBtn(treeId, treeNode) {
    // 	alert("showRemoveBtn",treeId);
    // 	return !treeNode.isFirstNode;
    // }
    // function showRenameBtn(treeId, treeNode) {
    // 	alert("showRenameBtn",treeId);
    // 	return !treeNode.isLastNode;
    // }
    function showLog(str) {
        if (!log) log = $("#log");
        log.append("<li class='" + className + "'>" + str + "</li>");
        if (log.children("li").length > 8) {
            log.get(0).removeChild(log.children("li")[0]);
        }
    }

    function getTime() {
        var now = new Date(),
            h = now.getHours(),
            m = now.getMinutes(),
            s = now.getSeconds(),
            ms = now.getMilliseconds();
        return (h + ":" + m + ":" + s + " " + ms);
    }

    var newCount = 1;

    function addHoverDom(treeId, treeNode) {
        console.log("addHoverDom", treeNode.id);
        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
            + "' title='add node' onfocus='this.blur();'></span>";
        sObj.after(addStr);
        var btn = $("#addBtn_" + treeNode.tId);
        if (btn) btn.bind("click", function () {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            // 执行添加操作
            console.log("treeId", treeNode.id);
            var pid = treeNode.id;
            $.ajax({
                type: "POST",
                data: {
                    "pId": pid,
                    "specsName": "新节点" + (pid)
                },
                url: "/app/specsCfg/addSpecs",
                success: function (specsCfg) {
                    console.log(specsCfg);
                    zTree.addNodes(treeNode, {id: specsCfg.specsId, pId: treeNode.id, name: specsCfg.specsName});
                }
            });
            return false;
        });
    };

    function removeHoverDom(treeId, treeNode) {
        $("#addBtn_" + treeNode.tId).unbind().remove();
    };

    function selectAll() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.setting.edit.editNameSelectAll = $("#selectAll").attr("checked");
    }

    $(document).ready(function () {
        var pId = $('#pId').val();
        getspecsTreeData(pId);
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        $("#selectAll").bind("click", selectAll);
    });

    function getspecsTreeData(pId) {
        $.ajax({
            type: "POST",
            data: {
                "pId": pId
            },
            url: "/app/specsCfg/getspecsTreeList",
            success: function (tree) {
                console.log(tree);
                var zNodes = [];
                zNodes = tree;
                console.log(zNodes);
                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            }
        });
    }


    // $(document).ready(function(){
    // 		getTreeData()
    // });
    //-->
</SCRIPT>
</BODY>
</HTML>